<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
	<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>${name_china}管理列表</title>
<%@include file="/common/head.jsp"%>

<!-- 时间日期插件 -->
<link
	href="<%=request.getContextPath()%>/static/plugin/My97DatePicker/skin/default/datepicker.css"
	rel="stylesheet">
<script
	src="<%=request.getContextPath()%>/static/plugin/My97DatePicker/WdatePicker.js"></script>
	
<link href="<%=request.getContextPath()%>/static/plugin/jqueryPagination/css/pagination.css"
	rel="stylesheet">
<script src="<%=request.getContextPath()%>/static/plugin/jqueryPagination/js/pagination.min.js"></script>
	
<style>
.field-title {
	display: block;
	float: left;
	line-height: 30px;
	margin-top: 10px;
}

.fildrange {
	display: flex;
	line-height: 30px;
}

.sameradio {
	margin-top: 10px;
	margin-left: 10px;
}
/****多选模块****/
.selemodule {
	display: inline-flex;
	margin-top: 15px;
	line-height: 30px;
}

.checkall {
	font-size: 16px;
}

.checkall>input {
	margin-right: 6px;
}

.samebutton {
	width: 100px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	color: #fff;
	margin-left: 10px;
	cursor: pointer;
}

.sty1 {
	background: #1f95ef;
}

.sty2 {
	background: #1eae31;
}

.sty3 {
	background: #0474c8;
}

.sty4 {
	background: #f86b67;
}

.sty5 {
	background: #37acc1;
}
.sty6 {
	background: #FF9999;
}
/****表格数据****/
.chartable {
	width: 100%;
	height: 100%;
	overflow: auto;
}

.sametbale-li {
	width: 28%;
	margin-left: 10px;
	float: left;
	border: solid 1px #ccc;
	margin-top: 10px;
}

.sametableimg {
	margin: 0 auto;
	height: 250px;
}

.sametableimg>img {
	width: 100%;
	height: 100%;
}

.sametablename {
	margin-top: 10px;
	padding: 0 15px;
	-webkit-box-orient: vertical;
	/* -webkit-line-clamp: 1; */
	text-overflow:ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/***价格**/
.sametbaleprice {
	padding: 0 15px;
	margin-top: 10px;
}

.vocherprice {
	margin-left: 9px;
	color: red;
}

.redpacket {
	float: right;
	color: red;
}
/****活动模块*****/
.activemod {
	padding: 0 15px;
	margin-top: 10px;
	display: inline-flex;
}

.sameactivebut {
	width: 58px;
	height: 18px;
	border: solid 1px #ff0000;
	line-height: 18px;
	text-align: center;
	margin-left: 10px;
	color: #ff0000;
	cursor: pointer;
}

.sameactivebut:nth-child(1) {
	margin-left: 0px;
}

.pitchbut {
	background: #ff0000;
	color: #fff;
}
/***佣金*****/
.commismod {
	padding: 0 15px;
	margin-top: 10px;
	overflow: auto;
	zoom: 1;
}

.commrate {
	float: left;
}

.commnum {
	float: right;
}

.stock {
	margin-top: 2px;
}
/***选项模块***/
.optionmod {
	margin-top: 30px;
	display: inline-flex;
	width: 100%;
}

.sameoptionsty {
	width: 33%;
	height: 36px;
	background: #0474c8;
	margin-left: 4px;
	line-height: 36px;
	color: #fff;
	text-align: center;
	cursor: pointer;
}

.sameoptionsty:nth-child(1) {
	margin-left: 0px;
}

.sortname {
	width: 26%;
	color: #555;
	padding-left: 3px;
	margin-left: 5px;
}

.shelf {
	width: 49%;
	height: 36px;
	background: #0474c8;
	line-height: 36px;
	text-align: center;
	color: #fff;
}

.hoverself {
	background: #8191a6;
}
/****选中*****/
.pitchbox {
	position: absolute;
}
</style>
</head>
<body class="iframe-page">
	<div class="page-title-wrapper">
		<div class="page-title">
			<div class="page-title-text">
				<span>${name_china}管理</span>
			</div>
			<div id="toolbar" style="float: right"></div>
		</div>
		<div class="page-title-border"></div>
	</div>

	<div class="search-field">
		<input type="hidden" class="summer-input" id="iTotalRecords" name="iTotalRecords" />
		<input type="hidden" class="summer-input" id="totalCount" name="totalCount" />
		
		<input type="hidden" class="summer-input" id="pid" name="pid"value="${pid}" />
		<input type="hidden" class="summer-input" id="codeid" name="codeid" value="${codeid}" />
		<input type="hidden" class="summer-input" id="categoryName" name="categoryName" value="${categoryName}" />
		
		
		<div class="fildrange">
			 <span class="field-cont"> 
			  <span class="field-cont-title">商品名称</span> 
			  <input type="text" class="summer-input" id="goodsName" />
			</span> 
			<span class="field-cont"> <span class="field-cont-title">佣金比率</span>
			<input type="text" class="summer-input" id="commissionStart" />
		</span> <span class="field-cont"> <span class="field-cont-title">至</span>
			<input type="text" class="summer-input" id="commissionEnd" />
		</span>
		</div>
		
		<div class="fildrange">
			<span class="field-cont">
		        <span class="field-cont-title">所属平台</span>
		        <input type="text" class="summer-input" id="spuPlatform"/>
		    </span>
		    
		    <span class="field-cont" style="<c:if test="${codeid!=000}">display: none</c:if>">
		        <span class="field-cont-title">商品分类</span>
		        <input type="text" id="categoryId" name="categoryId" class="summer-input summer-validatebox"  data-validatebox="validType:['required','maxLength[500]']"/> 
		    </span>
		    
		</div>
		<div class="fildrange">
			<!-- <span class="field-cont"> <span class="field-cont-title">品牌</span>
				<input type="text" class="summer-input" id="name" />
			</span>  -->
			<span class="field-cont"> <span class="field-cont-title">上架时间</span>
				<input type="text" id="updateTimeStart" name="updateTimeStart" class="summer-input summer-validatebox"  onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" data-validatebox="validType:['maxLength[50]']"/>
			</span> 
			<span class="field-cont"> <span class="field-cont-title">至</span>
				<input type="text" id="updateTimeEnd" name="updateTimeEnd" class="summer-input summer-validatebox"  onFocus="WdatePicker({dateFmt:'yyyy-MM-dd'})" data-validatebox="validType:['maxLength[50]']"/>
			</span>
		</div>

		<span class="field-btn-wrapper"> <a id="search"
			class="btn btn-primary btn-icon wave distance-right"><i
				class="icon icon-search"></i></a> <a id="reset"
			class="btn btn-icon wave wave-dark"><i class="icon icon-refresh"></i></a>
		</span> <br />
		<!-- -爆款选择- -->
		<div class="selemodule">
			<div class="checkall">
				<input type="checkbox" id="allCheckbox">全选
			</div>
			<div class="samebutton sty1 setstate" id="hot">设定爆款</div>
			<div class="samebutton sty2 setstate" id="recommed">设定推荐</div>
			<div class="samebutton sty3 setstate" id="Jingxuan">设定精选</div>
			<div class="samebutton sty4 setstate" id="showOut">全部下架</div>
			<div class="samebutton sty5 setstate" id="allDel">全部删除</div>
			<div class="samebutton sty6 setstate" id="Ywym">设定一物一码</div>
		</div>
	</div>


	<!-- -列表- -->
	<div id="t-tbale">
		<ul class="chartable">
		</ul>
	</div>
	
	<div id="pagination_3"></div>

	<script>
	//请求url
	var CONST_URL = {
		LIST: basePath + '${common_url}list',
	   	INIT_ADD: basePath + "${common_url}initAdd?categoryName=${categoryName}&&codeid=${codeid}&&pid=${pid}",
	   	INIT_EDIT: basePath + "${common_url}initEdit?orgCode=${orgCode}&&categoryName=${categoryName}",
	   	INIT_HONGBAO: basePath + "${common_url}initHongbao?orgCode=${orgCode}&&categoryName=${categoryName}",
	   	INIT_VIEW: basePath + "${common_url}initView?orgCode=${orgCode}&&categoryName=${categoryName}",
	   	GET_CATEGORY_ID: basePath + '/mall/system/market/marketshare/getGoodsCategory',
	   	EDIT_STATE: basePath + "${common_url}editState",
	   	DEL: basePath + "${common_url}del"
	}; 
	
    var  permission = CommonUtil.getPermission('${name_english}');
    
    $(function () {
    	
        // 新建toobar
		$.funcbar({
			id: 'toolbar',
			type: 'toolbar',
			data: permission,
			permit: ['${name_english}:initAdd'],
		});
		$('#spuPlatform').combobox({
	         valueField : 'code',
	         textField : 'name',
	         url : COMMON_URL.getCode + '?type=T_DM_T_GOODS_SPU_SPU_PLATFORM'
	     });
		
		//初始化下拉选项  
	 	 $('#categoryId').combobox({
	         url : CONST_URL.GET_CATEGORY_ID, 
	         valueField : 'id',
	         async:false,
	         textField : 'name'
	     });
		
        
        //新建
        $('#toolbar').on('click', 'a[data-permit="${name_english}:initAdd"]', function() {
        	var categoryName = $("#categoryName").val(); //分类名称
        	var codeid = $("#codeid").val();			//分类子id
        	var pid = $("#pid").val();					//分类父id
        	
        	if(categoryName.length != 0){
        		window.location.href = CONST_URL.INIT_ADD; 	
        	}else{
        		$.stip({
	                type:'danger',//显示类型 有info、 ok、 danger
	                text:'请您选择分类'    
            	});
        	}
		});
        
        //查看
        $('#t-wrap').on('click', 'a[data-permit="${name_english}:initView"]', function() {
        	var $this = $(this),
        	    id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
        	window.location.href = CONST_URL.INIT_VIEW +"&id=" + id;
        });
       
        //编辑
        $('#t-wrap').on('click', 'a[data-permit="${name_english}:initEdit"]', function() {
            var $this = $(this),
                id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
            window.location.href = CONST_URL.INIT_EDIT + '&id=' + id;
        });	
        
        //编辑
        $('#t-wrap').on('click', 'a[data-permit="${name_english}:initHongbao"]', function() {
            var $this = $(this),
                id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
            window.location.href = CONST_URL.INIT_HONGBAO + '&id=' + id;
        });	
        
        //删除
		$('#t-wrap').on('click', 'a[data-permit="${name_english}:del"]', function() {
			var $this = $(this),
			    id = $this.closest('tr').find('td[data-field="id"]').attr('data-value');
			$.sdialog({
				type: 'confirm',
				msg: '您确定要删除选中的记录吗?',
				onConfirm: function(result) {
				    if (result) {
				    	$.sajax({
			                url : CONST_URL.DEL + "?id=" + id,
			                onLoadSuccess : function() {
			                	 $.stip({
                	                type:'ok',//显示类型 有info、 ok、 danger
                	                text: '删除成功！'    
			                	});
			                }
			            });
				    		
				    }	
				}
			});
		});
		
		//顶部搜素改变状态
		$(".setstate").on('click',function(){
	    	var state = $(this).attr("id");
	    	var ids = getCheckids();
	    	if(state=="allDel"){
	    		$.sdialog({
					type: 'confirm',
					msg: '您确定要删除选中的记录吗?',
					onConfirm: function(result) {
					    if (result) {
					    	StateEdit(ids,state)
					    }	
					}
				});
	    	}else{
	    		StateEdit(ids,state)
	    	}
	    });
		
		
		// 查询按钮
        $('#search').on('click', function(){
        	creakTable(0,12)
        });
		
        
        //重置按钮
        $('#reset').on('click', function () {
        	//重置文本框的值
        	$('#goodsName').val('');
        	$('#spuPlatform').combobox('clear');
        	$("#commissionStart").val("");
			$("#commissionEnd").val("");
			$("#updateTimeStart").val("");
			$("#updateTimeEnd").val("");
			creakTable(0,12)
        });
        
        //全选
        $("#allCheckbox").click(function(){
        	swapCheck();
        })
        var isCheckAll = false;  
        function swapCheck() {  
            if (isCheckAll) {  
                $("input[name='spuId']").each(function() {  
                    this.checked = false;  
                });  
                isCheckAll = false;  
            } else {  
                $("input[name='spuId']").each(function() {  
                    this.checked = true;  
                });  
                isCheckAll = true;  
            }  
        }  
        
		creakTable(0,12);//初始化list
		
    });
    
    //顶部搜索改变状态
    function StateEdit(ids,state){
    	 $.ajax({
	   			url: CONST_URL.EDIT_STATE,
	   			type: "POST",
	   			dataType: "json",
	   			data:{
	   				"ids" : ids,
	   				"type" : state
	   			},
	   			success:function(data){ 
	   				$.stip({
		                type:'ok',//显示类型 有info、 ok、 danger
		                text: '设定成功'    
	            	});
	   				creakTable(0,12);
	        	 },  
	        	error: function (XMLHttpRequest, textStatus, errorThrown) {
	               // 状态码
	               console.log(XMLHttpRequest.status);
	               // 状态
	               console.log(XMLHttpRequest.readyState);
	               // 错误信息   
	               console.log(textStatus);
	           }
	   		}); 
    }
    
    //构建表格
    function creakTable(currPage,pageSize){
    	var start = 0;
    	if(currPage!=0){
    		start = currPage*pageSize
    	}
    	
    	$.ajax({
   			url: CONST_URL.LIST,
   			type: 'POST',
   			dataType: 'json',
   			data:{
   				"start": start,
   				"length" : pageSize,
   				"goodsName": trimSpace($('#goodsName').val()),
   				"spuPlatform":$('#spuPlatform').combobox('getValue'),
   				"commissionStart" : $("#commissionStart").val(),
   				"commissionEnd" : $("#commissionEnd").val(),
   				"updateTimeStart" : $("#updateTimeStart").val(),
   				"updateTimeEnd" : $("#updateTimeEnd").val(),
   				"categoryId":$('#categoryId').combobox('getValue'), 
   				"codeid" : $("#codeid").val()
   			},
   			success:function(data){ 
   				
				//获取总数据数量   				
   				var iTotalRecords = data.iTotalRecords;
   				/* var b = Math.ceil(iTotalRecords/pageSize); */  
   				
   				var b = Math.ceil((iTotalRecords + pageSize-1) / pageSize);	//算总数
   				
   				$("#pagination_3").whjPaging("setPage", currPage, b);
   				
   				var str="";
   				var data = data.data;
				for(var i=0 ;data.length > i ; i++ ){
					str+='<li class="sametbale-li">';
					str+='	<div class="sametableimg"><input type="checkbox" class="spuId pitchbox" name="spuId" value="'+data[i].id+'"><img src="'+data[i].mainImageUrl+'"></div>';
					str+='	<div class="sametablename">'+data[i].goodsName+'</div>';
					str+='	<div class="sametbaleprice">';
					str+='<span class="costprice">原价:'+data[i].price+'元</span>';
					str+='<span class="vocherprice">券后价：'+data[i].conPrice+'元</span>';
					str+='</div>';
					str+='	<div class="sametbaleprice">';
					str+='<span class="redpacket">'+data[i].couponMoney+'红包券</span>';
					str+='</div>';
					str+='<div class="activemod">';
					str+='	<div class="sameactivebut ';
							if(data[i].isHot==1){str+='pitchbut';}
					str+='">爆款</div>';
					str+='	<div class="sameactivebut ';
							if(data[i].isRecommend==1){str+='pitchbut'}
					str+='">推荐</div>';
					str+='	<div class="sameactivebut '
							if(data[i].isJingping==1){str+='pitchbut'}
					str+='">精选</div>';
					str+='	<div class="sameactivebut '
							if(data[i].isYwym==1){str+='pitchbut'}
					str+='">一物一码</div>';
					str+='</div>';
					str+='<div class="commismod">';
					str+='	<div class="commrate">佣金比例：'+data[i].wlCommission+'</div>';
					str+='	<div class="commnum">佣金：'+data[i].wlPrice+'</div>';
					str+='</div>';
					str+='<div class="commismod stock">';
					str+='	<div class="commrate">库存：'+data[i].totalInventorys+'</div>';
					str+='	<div class="commnum">订单数：'+data[i].totalSales+'</div>';
					str+='</div>';
					str+='<div class="commismod stock">';
					str+='	<div class="commrate">所属平台：';
							if(data[i].spuPlatform=="yh"){
								str+='友惠家';
							}
							if(data[i].spuPlatform=="jd"){
								str+='京东';
							}
							if(data[i].spuPlatform=="tm"){
								str+='天猫';
							}
							if(data[i].spuPlatform=="tb"){
								str+='淘宝';
							}
					str+='	</div>';
					str+='</div>';
					str+='<div class="optionmod">';
					if(data[i].isShow=='1'){
						str+='<div class="sameoptionsty showButton" id="'+data[i].id+'" name="showOut">下架</div>';
					}else{
						str+='<div class="sameoptionsty showButton" id="'+data[i].id+'" name="showIn">上架</div>';
					}
					
					/* str+='<div class="sameoptionsty">排序<input type="text" class="sortname"></div>'; */
					if(data[i].spuPlatform=="yh"){
						str+='<div class="sameoptionsty goodsEdit" id="'+data[i].id+'">编辑</div>';	
					}
					str+='</div>';
					str+='</li>';
				}
   				$(".chartable").html(str);
   				
   				//上架下架按钮
   				$(".showButton").on("click",function(){
   					var id = $(this).attr("id");
   					var state = $(this).attr("name");
	   				 $.ajax({
	   		   			url: CONST_URL.EDIT_STATE,
	   		   			type: "POST",
	   		   			dataType: "json",
	   		   			data:{
	   		   				"ids" : id,
	   		   				"type" : state
	   		   			},
	   		   			success:function(data){ 
	   		   				creakTable(0,12);
	   		   				$.stip({
	   			                type:'ok',//显示类型 有info、 ok、 danger
	   			                text: '设定成功'    
	   		            	});
	   		   				
	   		        	 },  
	   		        	error: function (XMLHttpRequest, textStatus, errorThrown) {
	   		               // 状态码
	   		               console.log(XMLHttpRequest.status);
	   		               // 状态
	   		               console.log(XMLHttpRequest.readyState);
	   		               // 错误信息   
	   		               console.log(textStatus);
	   		           }
	   		   		}); 
   				})
   				
   				$(".goodsEdit").on("click",function(){
   					var id = $(this).attr("id");
   					var categoryName = $("#categoryName").val();
   					window.location.href = CONST_URL.INIT_EDIT + '&id=' + id;
   				});
   				
        	 },  
        	error: function (XMLHttpRequest, textStatus, errorThrown) {
               // 状态码
               console.log(XMLHttpRequest.status);
               // 状态
               console.log(XMLHttpRequest.readyState);
               // 错误信息   
               console.log(textStatus);
           }
   		});
    	
    	
    	//分页
       	$("#pagination_3").whjPaging({
               pageSizeOpt: [
                   {'value': 12, 'text': '12条/页', 'selected': true},
                   {'value': 15, 'text': '15条/页'},
                   {'value': 18, 'text': '18条/页'},
                   {'value': 21, 'text': '21条/页'}
               ],
               showPageNum: 5,
               firstPage: '首页',
               previousPage: '上一页',
               nextPage: '下一页',
               lastPage: '尾页',
               skip: '跳至',
               confirm: '确认',
               refresh: '刷新',
               totalPageText: '共{}页',
               isShowFL: true,
               isShowPageSizeOpt: true,
               isShowSkip: true,
               isShowRefresh: true,
               isShowTotalPage: true,
               isResetPage: true,
               callBack: function (currPage, pageSize) {
               	if(currPage==1){
               		currPage = 0;
               	}
                   creakTable(currPage,pageSize);
               }
           });
    }
    
    /**
     * 获得勾选的value
     * @returns
     */
    function getCheckids(){
    	var cds =$("input[name='spuId']:checked").eq(0).val();
    	
    	for(var i=1;i < $("input[name='spuId']:checked").length ; i++){
    		cds = cds+","+$("input[name='spuId']:checked").eq(i).val();
    	}
    	return cds;
    }
    
</script>
</body>
</html>